<template>
  <h1>个人简历练习</h1>
<!--  点击加载数据,页面就有数据了-->
  <table border="1px" style="align-center:left">
    <tr>
      <th>照片:</th>
      <th >
<!--        利用单项绑定加载图片-->
<!--        除了给value属性值赋值, 其他的单项赋值都是采用的 v-bind:src 进行赋值的 -->
        <img :src="person.imgUrl" width="100px" alt="">
      </th>
    </tr>
    <tr>
      <th>姓名:</th>
      <th>{{person.name}}</th>
    </tr>
    <tr>
      <th>年龄:</th>
      <th>{{person.age}}</th>
    </tr>
    <tr>
      <th>好友:</th>
      <th>
        <ul v-for="p of person.friends">
          <li>{{p}}</li>
        </ul>
      </th>
    </tr>

  </table>
  <button @click="add()">加载数据</button>
</template>


<script setup>
import {ref} from "vue";
//效果:表格右侧列无数据,点击"加载数据"按钮后,页面显示右侧列数据
//提示:图片在public文件夹下,可通过文件名直接找到该图片
const person = ref({name:'',age:'',imgUrl:'',friends:[]});
const add= ()=>{
    person.value.name='传奇哥';
    person.value.age=18;
    person.value.friends=['路飞','索隆','娜美','张飞'];
    person.value.imgUrl='/fcq.jpg';
}
console.log(person)
</script>

<style scoped>

</style>